<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-size: 20px;
        }

        #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: red;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 4px;
        }

        #myBtn:hover {
            background-color: #555;
        }
    </style>
</head>

<body>

    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

    <div style="background-color:black;color:white;padding:30px">Scroll Down</div>
    <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll
        to top" button that becomes visible
        <h2>向下滑动</h2>
        <h2>向下滑动</h2>



        <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

            必知必会
            
            var mybutton = document.getElementById("myBtn");

            window.onscroll = function () { scrollFunction() };
    
            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    mybutton.style.display = "block";
                } else {
                    mybutton.style.display = "none";
                }
            }
    
            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
        </xmp>


        <h2>向下滑动</h2>
        <h2>向下滑动</h2>
        <h2>向下滑动</h2>
        <h2>向下滑动</h2>
    </div>


    <script>
        var mybutton = document.getElementById("myBtn");

        window.onscroll = function () { scrollFunction() };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                mybutton.style.display = "block";
            } else {
                mybutton.style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>
</html>